<template>
	<view class="search_task">
		<view class="search_title">筛选</view>
		<uni-section title="转办时间：" type="line"></uni-section>
		<view class="search_date">
			<view class="example-body">
				<uni-date-picker v-model="searchForm.params.beginTime" />
			</view>
			<view style="margin: 0 10rpx;">至</view>
			<view class="example-body">
				<uni-date-picker v-model="searchForm.params.endTime" />
			</view>
		</view>
		<view class="uni-form1">
			<view class="uni-form-item uni-column">
				<input type="text" name="eventTypeLv2Name" class="uni-input" v-model="eventTypeLv2Name" placeholder="请输入案件小类名称查询(选填)" autocomplete="off" />
				<image @click="searchEvent" src='@/static/city-manage/uni-search.png' class="icon_close"></image>
			</view>
		</view>
		<view class="event_types form">
			<view class="types_item">
				<view class="item_label">案件类别：</view>
				<picker class="picker_select" @change="getCategory" :value="eventType1Index" :range="caseTypeData" range-key="name">
					<view class="uni-input">{{eventTypeName}}</view>
					<image class="drop-down" src="../../static/city-manage/xiala.png"></image>
				</picker>
			</view>

			<view class="types_item">
				<view class="item_label">案件大类：</view>
				<picker class="picker_select" @change="getSubclass" :value="eventTypeLv11Index" :range="categoryNameData" range-key="name">
					<view class="uni-input">{{eventTypeLv1Name}}</view>
					<image class="drop-down" src="../../static/city-manage/xiala.png"></image>
				</picker>
			</view>

			<view class="types_item">
				<view class="item_label">案件小类：</view>
				<picker class="picker_select" @change="geteventTypeLv3" :value="eventTypeLv21Index" :range="subclassNameData" range-key="name">
					<view class="uni-input">{{eventTypeLv21Name}}</view>
					<image class="drop-down" src="../../static/city-manage/xiala.png"></image>
				</picker>
			</view>

			<view class="types_item">
				<view class="item_label">立案条件：</view>
				<picker class="picker_select" @change="changeTypeLv3" :value="eventTypeLv31Index" :range="eventTypeLv3Data" range-key="name">
					<view class="uni-input">{{eventTypeLv3Name}}</view>
					<image class="drop-down" src="../../static/city-manage/xiala.png"></image>
				</picker>
			</view>

			<!-- 代办案件3且是处置人员 增加督办 超时 来源筛选项目 -->
			<view class="types_item" v-if="reciveType==3 && userInfo.role.roleKey == 'czry'">
				<view class="item_label">案件来源：</view>
				<picker class="picker_select" @change="changearChivesState" :value="archivesIndex" :range="archivesData" range-key="name">
					<view class="uni-input">{{archivesName}}</view>
					<image class="drop-down" src="../../static/city-manage/xiala.png"></image>
				</picker>
			</view>

			<view class="types_item"  v-if="reciveType==3 && userInfo.role.roleKey == 'czry'">
				<view class="item_label">是否督办：</view>
				<picker class="picker_select" @change="changisName" :value="chengIndex" :range="isshowDate" range-key="name">
					<view class="uni-input">{{chengName}}</view>
					<image class="drop-down" src="../../static/city-manage/xiala.png"></image>
				</picker>
			</view>

			<view class="types_item"   v-if="reciveType==3 && userInfo.role.roleKey == 'czry'">
				<view class="item_label">是否超时：</view>
				<picker class="picker_select" @change="changisName1" :value="chengIndex1" :range="isshowDate" range-key="name">
					<view class="uni-input">{{chengName1}}</view>
					<image class="drop-down" src="../../static/city-manage/xiala.png"></image>
				</picker>
			</view>
		</view>
		<view class="search_buttons">
			<button type="default" @click="resetSearch">重置</button>
			<button type="default" @click="searchEventList">查找</button>
		</view>
	</view>
</template>

<script>
	import {getcaseType, getcategoryName, getsubclassName, eventTypelv3,getArchivesData} from '@/api/configure.js'
	export default{
		name: 'searchTask',
		props: ['isDrawer','reciveType',],
		data(){
			return{
				userInfo: uni.getStorageSync('userInfo'),

				eventTypeLv2Name:"",//小类名称

				eventType1:'',//案件类别
				eventType1Index:'',
				eventTypeName:'请选择',

				eventTypeLv11:'',//大类
				eventTypeLv11Index:'',
				eventTypeLv1Name:'请先选择案件类别',

				eventTypeLv21:'',//小类
				eventTypeLv21Index:'',
				eventTypeLv21Name:'请先选择案件大类',

				eventTypeLv31:'',//立案条件
				eventTypeLv31Index:'',
				eventTypeLv3Name:'请先选择案件小类',

				//案件来源
				archivesIndex:'',
				archivescode:'',
				archivesName:'请选择',

				//是否督办
				chengIndex:'',
				chengName:'请选择是否督办',
				//是否 超时
				chengIndex1:'',
				chengName1:'请选择是否超时',

				searchForm:{
					params:{
						beginTime: '',//上报起始时间
						endTime: '',//上报结束时间
					},
					eventType:'',//案件类别
					eventTypeLv1:'',//大类
					eventTypeLv2:'',//小类
					eventTypeLv2Name:'',
					eventTypeLv3:'',//立案条件
					eventSrcType:'',  //案件来源
				},
				caseTypeData:[],//案件类别数据
				categoryNameData:[],//大类数据
				subclassNameData:[],//小类数据
				eventTypeLv3Data:[],//立案条件数据
				archivesData:[],  //事件来源数据源
				subClassDisabled: false,
				isshowDate:[
					{name:'是',code:'1'},
					{name:'否',code:'0'},],

			}
		},
		mounted(){
			this.searchForm.params.beginTime = this.getCurrentDate();
			this.searchForm.params.endTime = this.getCurrentDate();
			//获取案件类别
			this.getType();
			// 获取 案件来源/
			this.getarchives();
		},
		methods: {
			//获取当前时间
			getCurrentDate(){
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day ;
				return timer;
			},
			//搜索小类
			searchEvent(){

			},
			//搜索案件
			searchEventList(){
				this.searchForm.eventTypeLv3 = this.eventTypeLv31;
				this.searchForm.eventTypeLv2Name  = this.eventTypeLv2Name;
				this.$emit('getTaskList', this.searchForm)
			},
			//重置
			resetSearch(){
				let _this = this;
				this.eventTypeLv2Name = '';

				this.eventType1='';//案件类别
				this.eventType1Index = '';
				this.eventTypeName = '请选择';

				this.eventTypeLv11='';//大类
				this.eventTypeLv11Index = '';
				this.eventTypeLv1Name = '请先选择案件类别';

				this.eventTypeLv21='';//小类
				this.eventTypeLv21Index = '';
				this.eventTypeLv21Name = '请先选择案件大类';

				this.eventTypeLv31='';//立案条件
				this.eventTypeLv31Index = '';
				this.eventTypeLv3Name = '请先选择案件小类';

				//案件来源
				this.archivesIndex='',
				this.archivescode='',
				this.archivesName='请选择',

				//是否督办
				this.chengIndex='',
				this.chengName='请选择是否督办',
				//是否 超时
				this.chengIndex1='',
				this.chengName1='请选择是否超时',

				this.categoryNameData=[];//大类数据
				this.subclassNameData=[];//小类数据
				this.eventTypeLv3Data=[];//立案条件数据
				this.archivesData=[],  //事件来源数据源xs

				this.searchForm.eventType  = '';
				this.searchForm.eventTypeLv1  = '';
				this.searchForm.eventTypeLv2  = '';
				this.searchForm.eventTypeLv2Name  = '';
				this.searchForm.eventTypeLv3  = '';
				this.searchForm.eventSrcType  = '';
				this.searchForm['params']  = {
					beginTime: _this.getCurrentDate(),//上报起始时间
					endTime: _this.getCurrentDate(),//上报结束时间
				}
			},

			//是否督办
			changisName(e){
				this.chengIndex =  e.target.value;
				var selected = this.isshowDate[this.chengIndex];  //获取选中的数组
				this.chengName = selected.name;
				this.searchForm.params.isOversee = selected.code;   //选中的id
			},
			// 是否超时
			changisName1(e){
				this.chengIndex1 =  e.target.value
				var selected = this.isshowDate[this.chengIndex1];  //获取选中的数组
				this.chengName1 = selected.name;
				this.searchForm.params.overTime = selected.code;   //选中的id
			},

			// 获取事件来源接口
			getarchives(){
				getArchivesData().then((res) => {
						this.archivesData = res.data;
					}
				).catch((error) => {
				});
			},

			//事件来源切换
			changearChivesState(e){
				this.archivesIndex = e.target.value;
				this.archivesData.forEach((ele, index) => {
					if(this.archivesIndex == index){
						this.archivesName = ele.name;
						this.archivescode = ele.code;
						this.searchForm.eventSrcType = ele.code
					}
				});
			},

			 /**
			 * Description:获取案件类别
			 * Author:ybt
			 * Date:2020/9/17
			 */
			getType() {
				uni.showLoading();
				//获取案件类型
				getcaseType().then(
					(res) => {
						this.caseTypeData = res.data;
						uni.hideLoading();
					}
				).catch((error) => {
				});
			},
			/**
			 * Description:获取大类
			 * Author:cy
			 * Date:2020/9/21
			 */
			getCategory(e){
				this.eventType1Index = e.target.value;
				this.caseTypeData.forEach((ele, index) => {
					if(this.eventType1Index == index){
						this.eventTypeName = ele.name;
						this.eventType1 = ele.code;
					}
				})

				if(this.eventType1 === ''){
					this.eventTypeLv11 = '';
					this.eventTypeLv21='';
					this.eventTypeLv31='';
					return;
				}
				//类别变化的时候 大类小类 条件都变化为重新选择
				this.eventTypeLv11='',//大类
				this.eventTypeLv11Index='',
				this.eventTypeLv1Name='请先选择案件类别',

				this.eventTypeLv21='',//小类
				this.eventTypeLv21Index='',
				this.eventTypeLv21Name='请先选择案件大类',

				this.eventTypeLv31='',//立案条件
				this.eventTypeLv31Index='',
				this.eventTypeLv3Name='请先选择案件小类',

				this.eventTypeLv11 = '';
				this.categoryNameData = [];
				//获取案件大类名称
				this.searchForm.eventType = this.eventType1;
				getcategoryName({type:this.eventType1}).then(
					(res) => {
						this.categoryNameData = res.data;
					}
				).catch((error) => {
				});
			},
			/**
			 * Description:获取小类
			 * Author:cy
			 * Date:2020/9/21
			 */
			getSubclass(e){
				this.eventTypeLv11Index = e.target.value;
				this.categoryNameData.forEach((ele, index) => {
					if(this.eventTypeLv11Index == index){
						this.eventTypeLv1Name = ele.name;
						this.eventTypeLv11 = ele.id;
					}
				})

				if(this.eventTypeLv11 === ''){
					this.eventTypeLv21='';
					this.eventTypeLv31='';
					return;
				}
				//大类变化的时候 小类 条件都变化为重新选择
				this.eventTypeLv21='',//小类
				this.eventTypeLv21Index='',
				this.eventTypeLv21Name='请先选择案件大类',

				this.eventTypeLv31='',//立案条件
				this.eventTypeLv31Index='',
				this.eventTypeLv3Name='请先选择案件小类',

				this.eventTypeLv21='';
				this.subclassNameData=[];
				this.searchForm.eventTypeLv1 = this.eventTypeLv11;
				getsubclassName({parentId:this.eventTypeLv11}).then(
					(res) => {
						this.subclassNameData = res.data;
					}
				).catch((error) => {
				});
			},
			/**
			 * Description:获取立案条件
			 * Author:cy
			 * Date:2020/9/23
			 */
			geteventTypeLv3(e){
				this.eventTypeLv21Index = e.target.value;
				this.subclassNameData.forEach((ele, index) => {
					if(this.eventTypeLv21Index == index){
						this.eventTypeLv21Name = ele.name;
						this.eventTypeLv21 = ele.id;
					}
				})

				if(this.eventTypeLv21 === ''){
					this.eventTypeLv31='';
					return;
				}
				//小类变化的时候立案条件重新选择
				this.eventTypeLv31='',//立案条件
				this.eventTypeLv31Index='',
				this.eventTypeLv3Name='请先选择案件小类',

				this.eventTypeLv31='';
				this.eventTypeLv3Data=[];
				this.searchForm.eventTypeLv2 = this.eventTypeLv21;
				eventTypelv3({parentId:this.eventTypeLv21}).then(
					(res) => {
						this.eventTypeLv3Data = res.data;
					}
				).catch((error) => {
				});
			},
			//改变立案条件
			changeTypeLv3(e){
				this.eventTypeLv31Index = e.target.value;
				this.eventTypeLv3Data.forEach((ele, index) => {
					if(this.eventTypeLv31Index == index){
						this.eventTypeLv3Name = ele.name;
						this.eventTypeLv31 = ele.id;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.search_task{
		.selection-box{
			width: 100%;
			height: 120rpx;
			padding: 24rpx;
			.selection-leftbox{
				width: 250rpx;
				height: 80rpx;
				border-radius: 20rpx;
				text-align: center;
				line-height: 50rpx;
				float: left;
				line-height: 80rpx;
				background-color: #F6F6F6;
			}
			.selection-rightbox{
				width: 250rpx;
				height: 80rpx;
				text-align: center;
				border-radius: 20rpx;
				line-height: 50rpx;
				line-height: 80rpx;
				float: left;
				background-color: #FF6D60;
				color: #FFFFFF;
				margin-left: 40rpx;
			}
		}
		.search_title{
			height: 88rpx;
			color:#fff;
			text-align: center;
			line-height: 88rpx;
			background: #ee625f;
			border-top:1px solid #fff;
		}
		.search_date{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			padding:0 20rpx;
			.uni-section{
				height: 70rpx;
			}
			/deep/.uni-date__input{
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 0 0 10rpx;
			}
		}
		.uni-form1{
			padding:0 20rpx;
			margin-top:20rpx;
			.uni-form-item{
				display: flex;
				flex-direction: row;
				align-items: center;
				border:1px solid #ccc;
				border-radius: 8rpx;
				padding: 0;
				.uni-input{
					height: 60rpx;
					border-radius: 20rpx;
					padding: 0 12px;
				}
				image{
					width: 36rpx;
					height: 36rpx;
					margin-right:10rpx;
				}
			}
		}
		.event_types{
			padding: 20rpx;
			.types_item{
				display: flex;
				margin-bottom:20rpx;
				.item_label{
					width:140rpx;
				}
				select{
					width:calc(100% - 140rpx);
				}
				.select_box{
					width:calc(100% - 140rpx);
					position: relative;
					.select_input{
						border:1px solid #ccc;
						height: 60rpx;
						border-radius: 8rpx;
						padding: 0 10px;
						line-height: 60rpx;
					}
					.select_options_box{
						//display: none;
						border:1px solid #7f7a7a;
						box-shadow: #7f7a7a 0px 0px 10px;
						position: absolute;
						top: 30px;
						width: 100%;
						background: rgb(255, 255, 255);
						.select_options{
							padding:6rpx 10rpx;
							&:last-child{
								border-bottom:0;
							}
						}
					}
				}
				.picker_select{
					width:calc(100% - 140rpx);
					height: 70rpx;
					border: 1px solid #ced4da;
					box-sizing: border-box;
					border-radius: 6rpx;
					position: relative;
					overflow: hidden;
					.uni-input{
						line-height: 60rpx;
						border-radius: 6rpx;
						color:#585656;
						padding: 1px 24rpx;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
					.drop-down{
						width:28rpx;
						height:20rpx;
						position: absolute;
						top:0;
						bottom:0;
						margin:auto;
						right: 10rpx;
					}
				}
			}
		}
		.search_buttons{
			position: absolute;
			bottom: 0;
			display: flex;
			left: 0;
			width:100%;
			uni-button{
				line-height: 76rpx;
				font-size: 28rpx;
				width: 50%;
				color:#fff;
				&:nth-of-type(1){
					background-color: #cbcbcb;
				}
				&:nth-of-type(2){
					background-color: #FF6D60;
				}
			}
		}
	}


</style>
